<!-- 废弃 -->
<template>
  <div class="page">
    <div class="nav">
      <Breadcrumb>
        <BreadcrumbItem to="/user/shipment">
          {{ $t('submitParcel.confirmationWaybill') }}
        </BreadcrumbItem>
        <BreadcrumbItem>
          {{ $t('submitParcel.payment') }}
        </BreadcrumbItem>
        <BreadcrumbItem>
          {{ $t('submitParcel.parcel') }}
        </BreadcrumbItem>
        <BreadcrumbItem>
        </BreadcrumbItem>
      </Breadcrumb>
    </div>

    <div class="shipping-address">
      <div class="shipping-title">
        <span class="label">{{ $t('submitParcel.shippingAddress') }}</span>
      </div>
      <div class="current-address">
        <img class="bg-border" src="@/assets/images/parcel/bg-border.png" alt="">
        <div class="address-info">
          <div class="left">
            <!--接收人-->
            <div class="receiver">
              <span class="name">{{ orderAddress.name }} {{ orderAddress.surname }}</span>
              <span class="contact">+{{ orderAddress.regionCode }} {{ orderAddress.mobile }}</span>
              <span class="contact"> {{ orderAddress.postalCode }}</span>
            </div>
            <!--地址-->
            <div class="addr">
              <span>{{ orderAddress.countryText }}</span>
              <span>{{ orderAddress.provinceText }}</span>
              <span>{{ orderAddress.cityText }} {{ orderAddress.areaText }} </span>
              <span>{{ orderAddress.addressDetail }} </span>
            </div>
          </div>
          <div class="right" v-if="false">
            <div class="select-addr">
              <div class="default-addr" v-if="dataInfo.isDefault == true">{{ $t('submitParcel.defaultAddress') }}</div>
              <div class="addr-value">{{ dataInfo.addressDetail }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 差价 -->
    <div class="card-main">
      <Card class="card">
        <h3 class="card-title">{{ $t('submitParcel.ConfirmationWaybillInfo') }}</h3>
        <!--备注-->
        <Row>
          <Col span="8">
          <div class="remark">
            <div class="label">{{ $t('submitParcel.logisticsChannelName') }}:</div>
            <div class="value">{{ dataInfo.channelName }}</div>
          </div>
          </Col>
          <Col span="8">
          <div class="remark">
            <div class="label">{{ $t('submitParcel.packagingServiceItem') }}:</div>
            <div>
              <div class="tooltip-value-wrap">
                <Tag class="tag" v-for="item in dataInfo.serviceItemsList" :key="item.id" color="#E76202">
                  {{ item.name }}
                  <Tooltip placement="top-start" max-width="300">
                    <div slot="content">
                      <p>{{ item.description }}</p>
                      <img width="50" :src="item.examplePicture" alt="">
                    </div>
                    <span class="iconfont icon-bangzhu"></span>
                  </Tooltip>
                </Tag>
              </div>
            </div>
          </div>
          </Col>
          <Col span="8">
          <div class="remark">
            <div class="label">{{ $t('submitParcel.declarationCurrency') }}:</div>
            <div class="value">
              {{ dataInfo.declareCurrency }}
            </div>
          </div>
          </Col>
          <Col span="8">
          <div class="remark">
            <div class="label">{{ $t('submitParcel.declarationValue') }}:</div>
            <div class="value">
              {{ dataInfo.declareCurrency }} {{ dataInfo.declareValue }}
            </div>
          </div>
          </Col>
          <Col span="8">
          <div class="remark">
            <div class="label">{{ $t('submitParcel.declaredWeight') }}:</div>
            <div class="value">
              {{ dataInfo.declareWeight }} g
            </div>
          </div>
          </Col>
          <Col span="8">
          <div class="remark">
            <div class="label">{{ $t('submitParcel.taxPaymentMethod') }}:</div>
            <div class="value">
              {{ $t('submitParcel.recipientTax') }}
            </div>
          </div>
          </Col>
          <Col span="8">
          <!--备注-->
          <div class="remark">
            <div class="label"> {{ $t('submitParcel.remark') }}:</div>
            <div class="value">{{ dataInfo.remarks }}</div>
          </div>
          </Col>
        </Row>
      </Card>
      <div class="main-min">
        <Card class="card-min">
          <Row>
            <Col span="24">
              <div class="remark">
                <div class="label">{{ $t('submitParcel.prepaidFreight') }}:</div>
                <div class="value">{{ dataInfo.channelName }}</div>
              </div>
            </Col>
            <Col span="24">
              <div class="remark">
                <div class="label">{{ $t('submitParcel.ActualShippingCost') }}:</div>
                <div class="value">{{ dataInfo.channelName }}</div>
              </div>
            </Col>
          </Row>
        </Card>
        <Card class="card-min last">
          <Row>
            <Col span="24">
              <div class="remark">
                <div class="label">{{ $t('submitParcel.PriceDifference') }}:</div>
                <div class="value">{{ dataInfo.prodDiffFee }}</div>
              </div>
            </Col>
          </Row>
        </Card>
      </div>
    </div>

    <!--商品清单-->
    <div class="commodity-list">
      <div class="table-wrap">
        <div class="table">
          <div class="table-header">
            <Row>
              <Col span="8">
              <div class="th">{{ $t('submitParcel.parcelInfo') }}</div>
              </Col>
              <Col span="4">
              <div class="th">{{ $t('submitParcel.quantity') }}</div>
              </Col>
              <Col span="4">
              <div class="th">{{ $t('submitParcel.price') }}</div>
              </Col>
              <Col span="4">
              <div class="th">{{ $t('submitParcel.grossMerchandiseValue') }}</div>
              </Col>
              <Col span="4" v-if="false">
              <div class="th">
                尺寸(cm)
              </div>
              </Col>
            </Row>
          </div>
          <div class="table-content">
            <div class="table-tr" v-for="info in orderList" :key="info.orderNum">
              <div class="table-top">
                <div class="left">
                  <product-picture v-if="info.parcelImgList" :image-list="info.parcelImgList"></product-picture>
                  <div class="parcelImg" v-else>
                    <img class="image" src="@/assets/images/public/default-image.png" alt="">
                  </div>
                  <div class="left-item">
                    <span class="text">{{ $t('submitParcel.parcelSize') }}(cm)：</span>
                    <span class="value">{{ info.length }}*{{ info.width }}*{{ info.height }}</span>
                  </div>
                  <div class="left-item">
                    <span class="text">{{ $t('submitParcel.parcelWeight') }}(g)：</span>
                    <span class="value">{{ info.weight }}</span>
                  </div>
                  <div class="left-item">
                    <span class="text">{{ $t('submitParcel.associatedWaybillNumber') }}：</span>
                    <span class="value">{{ info.expressOrderNo }}</span>
                  </div>
                  <div class="left-item">
                    <span class="text">{{ $t('submitParcel.expressNumber') }}：</span>
                    <span class="value">{{ info.expressNo }}</span>
                  </div>
                </div>
                <div class="status">
                  <packages-status :data-info="dataInfo"></packages-status>
                </div>
              </div>
              <div class="table-body">
                <div class="goods-item" v-for="item in info.orderItemList" :key="item.id">
                  <Row>
                    <Col span="8">
                    <div class="td td-commodity">
                      <div class="commodity-info">
                        <!--                        <Checkbox class="box"></Checkbox>-->
                        <div class="info">
                          <div class="commodity-left">
                            <product-picture v-if="item.mainImg" :image-list="[item.mainImg]"></product-picture>
                            <img v-else class="image" src="@/assets/images/public/default-image.png" alt="">
                          </div>
                          <div class="commodity-content">
                            <div class="title">{{ item.subject }}</div>
                            <div class="intro">{{ item.skuRemarks }}</div>
                          </div>
                        </div>
                      </div>
                      <!--                      <div class="tag">-->
                      <!--                        <div class="tag-text">-->
                      <!--                          标签：-->
                      <!--                          <span class="iconfont icon-tianjia-fang-L"></span>-->
                      <!--                        </div>-->
                      <!--                        <div class="tag-list">-->
                      <!--                          <Tag class="tag" color="primary">质检提醒</Tag>-->
                      <!--                        </div>-->
                      <!--                      </div>-->
                    </div>
                    </Col>
                    <Col span="4">
                    <div class="td">
                      x {{ item.quantity }}
                    </div>
                    </Col>
                    <Col span="4">
                    <div class="td">
                      {{ userInfo.currencySymbol }} {{ item.price }}
                    </div>
                    </Col>
                    <Col span="4">
                    <div class="td">
                      {{ userInfo.currencySymbol }} {{ item.price | bigTimes(item.quantity) }}
                    </div>
                    </Col>
                    <!--                    <Col span="4" v-if="false">-->
                    <!--                      <div class="td">-->
                    <!--                        {{item.productShippingInfo['length']}}*{{item.productShippingInfo.width}}*{{item.productShippingInfo.height}}-->
                    <!--                      </div>-->
                    <!--                    </Col>-->
                  </Row>
                </div>
              </div>
              <div class="note">
                <div class="ordinary-photograph" v-if="info.parcelImg">
                  <div class="content">
                    <span class="label"> {{ $t('user.ordinaryPhotograph') }}</span>
                    <div class="image-list">
                      <img class="image" :src="info.parcelImg" @click="viewPicture([info.parcelImg], 0)" alt="">
                    </div>
                  </div>
                  <div class="right" v-if="false">
                    <span class="iconfont icon-xiazai"></span>
                    <span class="iconfont icon-fenxiang_2"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="all-select-footer">
      <div class="top">
        <div class="left">
          <Checkbox v-model="riskCheckbox" class="select">
            <span class="text">{{ $t('submitParcel.awareness') }}</span>
          </Checkbox>
          <div class="right">
            <router-link :to="`/notice/${taxAgreement.id}`" target="_blank" class="tag">{{
              $t('submitParcel.taxReminder') }}</router-link>
            <router-link :to="`/notice/${noticeAgreement.id}`" target="_blank" class="tag">{{
              $t('submitParcel.logisticsReminder') }}</router-link>
          </div>
        </div>
      </div>
      <div class="info">
        <div class="left">
          <div class="weight" v-if="false">
            <Tooltip content="Top Left text" placement="top-start">
              运费按体积重计算 <span class="iconfont icon-bangzhu"></span>
            </Tooltip>
            <span class="weight-text">375 g</span>
          </div>
          <div class="weight weight-bold" v-if="false">
            <Tooltip content="海关申报货重(g)" placement="top-start">
              包裹重量 <span class="iconfont icon-bangzhu"></span>
            </Tooltip>
            <span class="weight-text">{{ dataInfo.declareWeight }} g</span>
          </div>
        </div>
        <div class="right">
          <div class="price">
            <span class="num">{{ dataInfo.currencySymbol }} {{ dataInfo.totalCost }}</span>
            <Poptip trigger="hover" :title="$t('submitParcel.expenseDetail') + ':'" content="content">
              <span class="iconfont icon-bangzhu"></span>
              <div class="poptip-content" slot="content">
                <div class="poptip-item">
                  <span>{{ $t('user.lineFreight') }}</span>
                  <span>{{ dataInfo.currencySymbol }} {{ dataInfo.routeCost }}</span>
                </div>
                <div class="poptip-item">
                  <span>{{ $t('submitParcel.serviceCharge') }}</span>
                  <span>{{ dataInfo.currencySymbol }} {{ dataInfo.serviceCost }}</span>
                </div>
                <div class="poptip-item">
                  <span>{{ $t('submitParcel.logisticsHandlingFee') }}</span>
                  <span>{{ dataInfo.currencySymbol }} {{ dataInfo.logisticsCost }}</span>
                </div>
                <div class="poptip-item">
                  <span>{{ $t('submitParcel.operatingCost') }}</span>
                  <span>{{ dataInfo.currencySymbol }} {{ dataInfo.operateCost }}</span>
                </div>
              </div>
            </Poptip>
          </div>
          <Button class="btn" type-size="oversized" :loading="loading" @click="onExpressOrderConfirm">
            {{ $t('submitParcel.confirmWaybillPay') }}
          </Button>
        </div>
      </div>
    </div>
    <Modal :title="$t('submitParcel.viewPackagePicture')" v-model="visible">
      <img :src="viewImage" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
import {
  cargoList,
  expressOrderConfirm,
  expressOrderCreate, confirmingDetails,
  expressOrderService, expressOrderToConfirm,
  logisticsRoutes
} from "@/api/expressOrder";
import ShippingAddress from "@/views/main/submit-parcel/shipping-address";
import PackagesStatus from "@/views/main/user/components/packages-status";
import ProductPicture from "@/views/main/user/components/product-picture";
import { mapState } from "vuex";

export default {
  name: "confirm-package",
  components: { ProductPicture, PackagesStatus, ShippingAddress },
  data() {
    return {
      images: [],
      riskCheckbox: true, // 风险提示
      visible: false,
      viewImage: '',
      dataInfo: '',
      remark: '',
      orderAddress: '',
      currentAddr: '', // 默认地址
      currentRoute: '', // 当前选择路线
      value1: false,
      loading: false,
      orderList: [],
      orderServiceList: [], // 包装列表
      logisticsList: [], // 物流路线列表
      expressOrderNo: '', // 运单编号
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      userCurrency: state => state.user.userCurrency,
      taxAgreement: (state) => {
        // 税费提醒
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_TAX_WARNING;
        }
        return obj;
      },
      noticeAgreement: (state) => {
        // 物流提醒
        let obj = '';
        if (state.config.config) {
          obj = state.config.config.articleMap.CFG_ARTICLE_DELIVERY_NOTICE;
        }
        return obj;
      }
    })
  },
  created() {
    this.expressOrderNo = this.$route.query.id;
    this.getCargoList();
  },
  methods: {
    viewPicture(list, index) {
      // 查看图片
      this.images = list;
      this.$viewerApi({
        images: this.images,
        options: {
          initialViewIndex: index
        }
      })
    },
    onViewImage(image) {
      this.visible = true;
      this.viewImage = image;
    },
    onExpressOrderConfirm() {
      if (!this.riskCheckbox) {
        this.$Message.error(this.$t('submitParcel.checkRiskAlert'))
        return false;
      }
      this.loading = true;
      // 确认运单并支付
      expressOrderConfirm(this.expressOrderNo).then((res) => {
        this.loading = false;
        this.$router.push(`/pay?id=${res.result}`);
      }).catch(() => {
        this.loading = false;
      })
    },
    getCargoList() {
      // 确认详情详细
      confirmingDetails(this.expressOrderNo,this.userCurrency.code).then((res) => {
        this.orderList = res.result.parcelList;
        this.dataInfo = res.result;
        if (res.result.orderAddress) {
          this.orderAddress = res.result.orderAddress;
          this.orderAddress.name = res.result.orderAddress.recipientName.split(',')[0];
          this.orderAddress.surname = res.result.orderAddress.recipientName.split(',')[1];
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.page {
  position: relative;
  width: 1200px;
  margin: 32px auto;
  padding-bottom: 80px;

  .nav {
    padding: 8px 0;

    border-bottom: 1px solid @t-table-border-color;
  }

  .shipping-address {
    margin-top: 40px;

    .shipping-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      font-weight: 500;

      .label {

        color: @t-title-color;
      }

      .left {
        display: flex;
        align-items: center;

        .fun-text {
          display: block;
          margin-left: 24px;
          color: @primary-color;
        }
      }
    }

    .current-address {
      position: relative;
      margin-top: 16px;

      .bg-border {
        display: block;
        width: 100%;
      }

      .address-info {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 40px;
        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;

          .receiver {
            color: @t-title-color;

            .name {
              font-size: 24px;
              font-weight: 700;
            }

            .contact {
              margin-left: 24px;
              font-size: 14px;
              font-weight: 500;
            }
          }

          .addr {
            color: @t-text-color;

            span {
              display: block;
              margin-top: 6px;
            }
          }
        }

        .right {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;

          .select-addr {
            display: flex;
            align-items: center;
            font-size: 12px;
            font-weight: 400;

            .default-addr {
              padding: 2px 12px;
              color: @primary-color;
              background: #f0f9ff;
              border-radius: 2px;
            }

            .addr-value {
              padding: 2px 12px;
              margin-left: 8px;
              color: @success-color;
              background: #E6F3EC;
              border-radius: 2px;
            }
          }

          .edit-wrap {
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .edit {
              display: flex;
              align-items: center;
              cursor: pointer;

              img {
                display: block;
                width: 16px;
                flex: 0 0 16px;
                height: 16px;
              }

              span {
                margin-left: 4px;
                color: @primary-color;
                font-size: 14px;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }

  .card-main {
    display: flex;
    align-items: center;
    margin-top: 24px;
    .main-min{
      margin-left: 10px;
      width: 65%;
      display: flex;
      flex-direction: column;
      .card-min{
        height: 100px;
        flex-direction: column;
        display: flex;
        :deep(.label){
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 500;
          font-size: 14px;
          color: #232323;
        }
        :deep(.remark){
          margin-top: 0px;
          margin-bottom: 6px;
          display: flex;
          justify-content: space-between;
        }
        :deep(.value){
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 400;
          font-size: 22px;
          color: #232323;
        }
        :deep(.ivu-card-body){
          margin-top: 0px;
          margin-bottom: 20px;
        }
        &:first-child{
          margin-bottom: 7px;
          background: #F9F9F9;
        }
        &:last-child{
          background: #f0f9ff;
        }
      }
      .last{
        :deep(.remark){
          margin-top: 18px;
        }
        :deep(.value){
          color: #E76202;
        }
      }
    }
    .card {
      margin-right: 10px;
      .card-title {
        color: @t-title-color;
        margin-bottom: 16px;
      }
    }
  }

  .commodity-list {
    border-bottom: 1px solid @t-table-border-color;
    padding-bottom: 40px;

    .table-wrap {
      margin-top: 32px;

      .table {
        &-header {
          padding: 12px;
          background: @t-table-header-bg;

          .th {
            padding-left: 16px;
            color: @t-title-color;
            font-size: 14px;
            font-weight: 600;
          }
        }

        &-content {
          border-top: 1px solid @t-table-border-color;

          .table-tr {
            padding: 13px 0;
            border-bottom: 1px solid @t-table-border-color;

            &:hover {
              background: rgba(235, 247, 255, 0.4);
            }

            .table-top {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 13px;

              .left {
                display: flex;
                align-items: center;
                color: @t-label-color;
                font-size: 14px;

                .parcelImg {
                  width: 60px;
                  height: 60px;
                  overflow: hidden;
                  cursor: pointer;

                  .image {
                    display: block;
                    width: 100%;
                  }
                }

                .left-item {
                  margin-right: 12px;

                  .text {}

                  .value {
                    color: @t-title-color;
                  }
                }

                .date {
                  margin: 0 12px;
                }

                .fun {
                  cursor: pointer;
                  color: @primary-color;
                  margin-right: 32px;
                }
              }

              .delete {
                cursor: pointer;
                color: @primary-color;
                font-size: 14px;
              }

              .status {
                color: @primary-color;
                font-size: 14px;
              }

              .box {
                display: flex;
                align-items: center;

                .icon {
                  display: block;
                  width: 16px;
                  margin-left: 12px;
                }

                .text {
                  margin-left: 4px;
                  color: @t-label-color;
                  font-size: 14px;
                }
              }
            }

            .table-body {
              margin-top: 16px;
              color: @t-text-color;
              font-size: 12px;
              border: 1px solid @t-table-border-color;
              padding: 13px;

              .goods-item {
                margin-bottom: 12px;
              }

              .td {
                padding-left: 16px;

                .btn {
                  cursor: pointer;
                  color: @primary-color;
                  font-size: 12px;
                }
              }

              .order-info {
                &:hover {
                  cursor: pointer;
                  color: @primary-color;
                }
              }

              .td-commodity {
                padding-left: 0;

                .tag {
                  display: flex;
                  align-items: center;
                  margin-left: 116px;
                  font-size: 12px;
                  font-weight: 500;
                  color: @t-title-color;

                  .iconfont {
                    font-size: 14px;
                    color: @t-title-color;
                  }
                }

                .tag-list {
                  display: flex;

                  .tag {
                    margin-left: 4px;
                    font-size: 12px;
                  }
                }

                .remark {
                  display: block;
                  cursor: pointer;
                  margin-left: 116px;
                  font-size: 12px;
                }
              }

              .edit {
                cursor: pointer;
              }

              .type-list {
                display: block;

                .type-item {
                  display: inline-block;
                  padding: 4px;
                  margin-top: 4px;
                  color: @t-text-color;
                  font-size: 12px;
                  background: #F5F5F5;
                  border-radius: 2px 2px 2px 2px;
                  opacity: 1;

                  &:first-child {
                    margin-top: 0;
                  }
                }
              }

              .commodity-info {
                display: flex;
                align-items: center;

                .info {
                  display: flex;

                  .commodity-left {
                    .image {
                      display: block;
                      width: 80px;
                      height: 80px;
                      border-radius: 4px 4px 4px 4px;
                    }
                  }

                  .commodity-content {
                    font-size: 12px;
                    margin-left: 12px;

                    .title {
                      color: @t-title-color;
                      font-weight: 500;
                      white-space: pre-line;
                      /*允许换行*/
                      overflow: hidden;
                      text-overflow: ellipsis;
                      /*省略号*/
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      /*行向垂直排列*/
                      -webkit-line-clamp: 2; //*限制2
                    }

                    .intro {
                      font-size: 12px;
                      margin-top: 4px;
                      margin-bottom: 8px;
                      color: @t-text-color;
                      white-space: pre-line;
                      /*允许换行*/
                      overflow: hidden;
                      text-overflow: ellipsis;
                      /*省略号*/
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      /*行向垂直排列*/
                      -webkit-line-clamp: 2; //*限制2
                    }
                  }
                }
              }

              .pay {
                text-align: center;

                .pay-date {
                  color: @t-text-color;
                  text-align: center;
                }
              }

              .note {
                .ordinary-photograph {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  background: @t-border-color;
                  padding: 12px 24px;
                  margin-top: 15px;

                  .content {
                    display: flex;
                    align-items: center;

                    .label {
                      color: @t-text-color;
                      font-size: 12px;
                    }

                    .image-list {
                      display: flex;
                      align-items: center;

                      .image {
                        display: block;
                        width: 56px;
                        height: 56px;
                        margin-left: 16px;
                        border-radius: 4px 4px 4px 4px;
                      }
                    }
                  }

                  .right {
                    .iconfont {
                      margin-left: 44px;
                      cursor: pointer;
                      color: @t-title-color;
                      font-size: 18px;
                    }
                  }

                  .content {}
                }

                .feedback-bg {
                  display: block;
                  background: #f0f9ff;

                  .feedback-content {
                    color: @t-text-color;
                    font-size: 12px;
                    font-weight: 500;

                    .date {}

                    .text {}
                  }

                  .image-list {
                    display: flex;
                    margin-top: 12px;

                    .image {
                      display: block;
                      margin-right: 16px;
                      width: 96px;
                      height: 96px;
                      border-radius: 4px 4px 4px 4px;
                    }
                  }
                }
              }
            }

            .note {
              .ordinary-photograph {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: @t-border-color;
                padding: 12px 24px;
                margin-top: 15px;

                .content {
                  display: flex;
                  align-items: center;

                  .label {
                    color: @t-text-color;
                    font-size: 12px;
                  }

                  .image-list {
                    display: flex;
                    align-items: center;

                    .image {
                      cursor: pointer;
                      display: block;
                      width: 56px;
                      height: 56px;
                      margin-left: 16px;
                      border-radius: 4px 4px 4px 4px;
                    }
                  }
                }

                .right {
                  .iconfont {
                    margin-left: 44px;
                    cursor: pointer;
                    color: @t-title-color;
                    font-size: 18px;
                  }
                }

                .content {}
              }

              .feedback-bg {
                display: block;
                background: #f0f9ff;

                .feedback-content {
                  color: @t-text-color;
                  font-size: 12px;
                  font-weight: 500;

                  .date {}

                  .text {}
                }

                .image-list {
                  display: flex;
                  margin-top: 12px;

                  .image {
                    display: block;
                    margin-right: 16px;
                    width: 96px;
                    height: 96px;
                    cursor: pointer;
                    border-radius: 4px 4px 4px 4px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .remark {
    display: block;
    margin-top: 16px;

    .label {
      display: block;
      width: 140px;
      color: @t-text-color;
      font-size: 14px;
      font-weight: 500;
    }

    .value {
      color: @t-title-color;
      font-size: 14px;
      font-weight: 600;
    }

    .tooltip-value-wrap {
      display: flex;
      flex-wrap: wrap;

      .iconfont {
        cursor: pointer;
        font-size: 12px;
      }

      .tag {
        display: flex;
        align-items: center;
      }
    }

    .textarea {
      flex: 1;

      &:deep(.ivu-input) {
        background: #F5F5F5;
        border-radius: 2px 2px 2px 2px;
      }
    }
  }

  .mailing-router {
    margin-top: 40px;

    .select-mailing-router {
      background: #F5F5F5;
      border-radius: 2px 2px 2px 2px;
      padding: 24px;

      .mailing-router-info {
        display: flex;
        align-items: center;

        .info-left {
          img {
            display: block;
            width: 96px;
            border-radius: 4px;
          }

          span {
            display: block;
            margin-top: 12px;
            color: @t-title-color;
            font-size: 14px;
          }
        }
      }

      .commission {
        .text {
          color: @t-text-color;
          font-size: 14px;
        }

        .price {
          display: block;
          color: @t-title-color;
          font-size: 20px;
          font-weight: 700;
        }

        .tooltip-value-wrap {
          cursor: pointer;
          color: @t-title-color;
        }

        .detail {
          display: block;
          margin-top: 6px;
          color: @primary-color;
          font-size: 14px;
        }
      }

      .cycle {
        .text {
          color: @t-title-color;
          font-size: 14px;
        }

        .day {
          color: @t-title-color;
          font-size: 14px;
        }

        .view-date {
          color: @primary-color;
          font-size: 14px;
        }

        .schedule-wrap {
          display: flex;
          align-items: center;

          .schedule {
            width: 100%;
            background: #51B481;
            border-radius: 80px;
            height: 6px;
            overflow: hidden;

            .achieved {
              width: 50%;
              height: 100%;
              background: #51B481;
            }
          }

          span {
            margin-left: 2px;
            color: @t-title-color;
            font-size: 14px;
          }
        }
      }

      .hint {
        color: @t-title-color;
        font-size: 14px;
      }

      .select-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    }

    .select-table-wrap {
      margin-top: 32px;

      .select-mailing-router {
        background: rgba(0, 0, 0, 0);
        padding: 0px;
        margin-bottom: 24px;
      }

      .table {
        &-header {
          padding: 12px;
          background: @t-table-header-bg;

          .th {
            padding-left: 16px;
            color: @t-title-color;
            font-size: 14px;
            font-weight: 500;

            .all {
              cursor: pointer;
            }
          }
        }

        &-content {
          border-top: 1px solid @t-table-border-color;

          .table-tr {
            padding: 13px;
            border-bottom: 1px solid @t-table-border-color;

            .td {
              padding-left: 16px;
            }

            &:hover {
              background: rgba(235, 247, 255, 0.4);
            }
          }
        }
      }
    }
  }

  .select-way {
    margin-top: 32px;

    .label {
      color: @t-title-color;
      font-size: 14px;
      font-weight: 500;
    }

    .content {
      margin-top: 8px;

      .input-wrap {
        display: flex;
        align-items: center;

        .input {
          width: 265px;
        }

        .autonomously-input {
          width: 160px;
        }

        .btn {
          height: 44px;
          margin-left: 4px;
        }

        .text {
          cursor: pointer;
          margin-left: 14px;
          color: @t-text-color;
          font-size: 14px;

        }
      }

      .radio {
        margin-right: 48px;
      }

      .radio-text {
        color: @t-text-color;
        font-size: 14px;
      }

      .radio-active {
        color: @primary-color;
      }

      .hint {
        color: @t-text-color;
        font-size: 14px;
      }
    }
  }

  .alert {
    margin-top: 40px;
    margin-bottom: 32px;
    background: #f0f9ff;
    padding: 24px;
    border-radius: 4px;

    .title {
      color: @primary-color;
      font-size: 20px;
      font-weight: 500;

      .icon {}

      span {
        margin-left: 8px;
        color: @primary-color;
        font-size: 20px;
        font-weight: 500;
      }
    }

    .content {
      margin-top: 4px;
      color: @t-title-color;
      font-size: 14px;
      line-height: 24px;
    }
  }

  .all-select-footer {
    position: sticky;
    bottom: 0;
    padding: 24px 16px;
    background: #FFFFFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    border: 1px solid #ECECEC;

    .top {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: 43px;

      .left {
        display: flex;
        align-items: center;

        .select {
          .text {
            color: @t-text-color;
            font-size: 14px;
          }
        }

        .right {
          display: flex;

          .tag {
            margin-left: 24px;
            cursor: pointer;
            color: @primary-color;
            font-size: 14px;

            &:first-child {
              margin-left: 8px;
            }
          }
        }
      }
    }

    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        .weight {
          color: #999999;
          font-size: 16px;

          .weight-text {
            margin-left: 6px;
            font-size: 18px;
            font-weight: 900;
          }
        }

        .weight-bold {
          color: @t-title-color;
        }
      }

      .right {
        display: flex;
        align-items: center;

        .price {
          .num {
            margin-right: 6px;
            color: @primary-color;
            font-size: 24px;
            font-weight: 600;
          }

          .iconfont {
            cursor: pointer;
          }

          .poptip-content {
            width: 250px;
          }

          .poptip-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 12px;
            color: @t-text-color;

            &:first-child {
              margin-top: 0;
            }
          }
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 16px;
          min-width: 140px;

          height: 52px;
          border-radius: 2px 2px 2px 2px;
          opacity: 1;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          background: @primary-color;
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>